<template>
  <el-container style="height: 100%; ">
    <!--左侧部分-->
    <el-aside :width="width" id="test">
      <asides></asides>
    </el-aside>
    <!--头部-->
    <el-container>
      <el-header style="text-align: right; font-size: 12px;height:110px;">
        <headers></headers>
      </el-header>
      <!--主要页面-->
      <el-main style="height:9999px">
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
  import asides from "./components/aside.vue"
  import headers from "./components/header.vue"
  import { eventBus } from './main'
  export default {
    data() {
      return {
        username: "Chino",
        width: "200px",
      }
    },
    components: {
      asides,
      headers,
    },
    methods: {
      errorHandler() {
        console.log(false);
      }
    },
    mounted() {
      eventBus.$on('test', () => {
        var elem = document.getElementById("test");
        var pos = 200;
        var id = setInterval(frame, 10);
        function frame() {
          if (pos == 64) {
            clearInterval(id);
          } else {
            pos -= 4;
            elem.style.width = pos + 'px';
          }
          this.width = pos;
        }
      }),
        eventBus.$on('back', () => {
          var elem = document.getElementById("test");
          var pos = 64;
          var id = setInterval(frame, 10);
          function frame() {
            if (pos == 200) {
              clearInterval(id);
            } else {
              pos += 4;
              elem.style.width = pos + 'px';
            }
            this.width = pos;
          }
        })
    }
  }
</script>

<style>
  /*主体部分*/
  .el-main {
    background-color: #e9eef3;
  }

  .el-table td, .el-table th {
    text-align: center !important;
  }
  /*头部*/
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    padding: 0;
    line-height: 60px;
  }

  .el-icon-close {
    color: #409eff !important;
  }

    .el-icon-close:hover {
      color: #fff !important;
      background-color: #409eff !important;
    }
  /*左侧*/
  .el-aside {
    color: #333;
  }

  /*HTML*/
  body {
    margin: 0;
    background-color: #01142c;
    overflow: hidden;
  }

  ::-webkit-scrollbar {
    display: none;
  }
</style>
